<template>
	<view>
		<view class="shop_t">
			<view @click="change(1)" :class="typechang == 1?'ats':'ts'">
				门店信息
			</view>
			<view @click="change(2)" :class="typechang == 2?'ats':'ts'">
				店铺设置
			</view>
		</view>

		<view class="" v-if="typechang==1">
			<view class="block_1">
				<view class="tit">
					门店信息
				</view>

				<view class="items">
					<view class="itit">经营品类</view>
					<view class="icont" @click="pageselect">
						<span :style="{color:categoryname?'#000':'#D1CDCD'}">{{categoryname?categoryname:'请选择'}}</span>
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
				<view class="items">
					<view class="itit">门店名称</view>
					<view class="icont">
						<input v-model="params.shopName" type="text" placeholder-class="inputs" placeholder="请输入门店名称" />
					</view>
				</view>
				<view class="items">
					<view class="itit">所在地区</view>
					<view class="icont" v-if="citylist.length!=0">
						<region :citylist='citylist' @regionStr='regionchange'></region>
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
				<view class="items" @click="pageMap">
					<view class="dwflex">
						<view class="itit">详细地址</view>
						<view class="flex_b terxt">
							<uni-icons size='18' color="#979797" type="location"></uni-icons>
							定位
						</view>
					</view>
					<view class="test" :style="{color:params.address?'#000':'#D1CDCD'}">
						{{params.address?params.address:'点击定位'}}
						<!-- 	<textarea disabled maxlength='-1'  v-model="params.address" 
						auto-height class="t2" type="text" placeholder-class="inputs" placeholder="请输入详细地址" /> -->
					</view>

				</view>
				<!-- 		<view class="items" @click="gomap">
					<view class="itit">地图位置</view>
					<view class="itit" style="margin: 38rpx auto;">
						位置有误直接影响客户到店，请点开地图仔细核对，拖拽地 图确保位置正确
					</view>
					<view class="maps">
						<map name="" style="width: 100%;height: 200rpx;"></map>
						<view class="abs">
							点击选择准确位置
						</view>
					</view>
				</view> -->
				<view class="imgs">
					<view class="">
						<view style="margin-bottom: 20rpx;" class="">门头照片</view>
						<view class="">
							<imageUpload :upWith="330" :upHeight="200" :imgList="imageList1" :maxCount="1"
								@change="imgFn($event,1)"></imageUpload>
						</view>
					</view>
					<view class="">
						<view style="margin-bottom: 20rpx;" class="">营业执照</view>
						<view class="">
							<imageUpload :whyupload="false" :upWith="330" :upHeight="200" :imgList="imageList2"
								:maxCount="1" @change="imgFn($event,2)"></imageUpload>
						</view>
					</view>
				</view>

				<view class="imglist">
					<view style="margin-bottom: 20rpx;" class="">其他资质</view>
					<view class="">
						<imageUpload :whyupload="false" :upWith="160" :upHeight="160" :imgList="imageList" :maxCount="9"
							@change="imgFn($event,3)"></imageUpload>
					</view>
				</view>
			</view>

			<view class="block_1">
				<view class="tit">
					联系信息
				</view>
				<view class="items">
					<view class="itit">联系人</view>
					<view class="icont">
						<input v-model="params.shopPeople" type="text" placeholder-class="inputs"
							placeholder="请输入联系人姓名" />
					</view>
				</view>
				<view class="items">
					<view class="itit">联系电话</view>
					<view class="icont">
						<input :disabled="true" v-model="params.shopPhone" type="number" maxlength="11"
							placeholder-class="inputs" placeholder="请输入联系电话" />
					</view>
				</view>
			</view>
		</view>
		<view class="block_1" v-else>
			<view class="imgs" style="border: none;">
				<view class="">
					<view class="ts" style="margin-bottom: 20rpx;">店铺logo</view>
					<view class="">
						<imageUpload :upWith="140" :upHeight="140" :imgList="imageList3" :maxCount="1"
							@change="imgFn($event,4)"></imageUpload>
					</view>
				</view>
			</view>
			<view class="imgs" style="border: none;">
				<view class="">
					<view class="ts" style="margin-bottom: 20rpx;">店铺背景</view>
					<view class="">
						<imageUpload :upWith="280" :upHeight="240" :imgList="imageList4" :maxCount="1"
							@change="imgFn($event,5)"></imageUpload>
					</view>
				</view>
			</view>
			<view class="imgs" style="border: none;">
				<view class="">
					<view class="ts" style="margin-bottom: 20rpx;">营业时间</view>
					<view class="rigicon" @click="opentime" :style="{color:times?'#000':''}">
						{{times?times:'请选择营业时间'}}
					</view>
				</view>
			</view>
		</view>
		<view class="footerbtn" @click="handleSave">
			<view class="cont">
				<view class="btn">
					保存
				</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;">

		</view>
		<selecttime ref="time" :startDefaultTime="startDefaultTime" :endDefaultTime="endDefaultTime"
			@timeRange="timeRange"></selecttime>
	</view>
</template>

<script>
	import QQMapwx from '@/minxins/amap-wx.130.js'
	import {
		getShopinfo,
		editShopinfo
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				startDefaultTime: "12:00", //默认值
				endDefaultTime: "23:00", //
				typechang: 1,
				params: {
					category: "",
					shopName: '',
					province: '',
					city: '',
					county: '',
					address: '',
					latitude: '',
					longitude: '',
					doorImg: '',
					licenseImg: '',
					otherImg: '',
					shopPhone: '',
					shopPeople: '',

					logo: "",
					backgroundImg: '',
					openTimeBegin: '',
					openTimeEnd: '',


				},
				categoryname: '',
				isdwopen: false,
				imageList: [],
				imageList1: [],
				imageList2: [],
				imageList3: [],
				imageList4: [],
				citylist: [],
				times:''
			};
		},
		onLoad() {
			getShopinfo({}).then(res => {
				this.params = res.data
				this.categoryname = res.data.category
				this.imageList1 = res.data.doorImg.split(',').map(item => {
					return {
						url: item
					}
				})
				this.imageList2 = res.data.licenseImg.split(',').map(item => {
					return {
						url: item
					}
				})
				this.imageList = res.data.otherImg.split(',').map(item => {
					return {
						url: item
					}
				})
				if(res.data.logo && res.data.backgroundImg && res.data.openTimeBegin){
					this.imageList3 = res.data.logo.split(',').map(item => {
						return {
							url: item
						}
					})
					this.imageList4 = res.data.backgroundImg.split(',').map(item => {
						return {
							url: item
						}
					})
					this.times = res.data.openTimeBegin + '-' +  res.data.openTimeEnd
				}
				this.citylist = [res.data.province, res.data.city, res.data.county]
			})
		},
		onShow() {
			uni.$once('address', (data) => {
				this.params.address = data.address
				this.params.latitude = data.latitude
				this.params.longitude = data.longitude
			})
		},
		methods: {
			pageMap(){
				uni.navigateTo({
					url: '/pages/index/newmap'
				})
			},
			regionchange(e) {
				let list = e.split('/')
				this.params.province = list[0]
				this.params.city = list[1]
				this.params.county = list[2]
			},
			change(type) {
				this.typechang = type
			},
			opentime() {
				this.$refs.time.open()
			},
			timeRange(e) {
				this.params.openTimeBegin = e[0]
				this.params.openTimeEnd = e[1]
				this.times = e[0] + '-' + e[1]
			},
			imgFn(e, type) {
				console.log(e);
				if(e.length == 0){ return}
				if (type == 1) {
					this.imageList1 = e
						// this.params.doorImg = e[0].url
				} else if (type == 2) {
					this.imageList2 = e
					this.params.licenseImg = e[0].url
				} else if (type == 3) {
					this.imageList = e
					let ulist = e.map(item => {
						return item.url
					})
					this.params.otherImg = ulist.join(',')
				} else if (type == 4) {
					this.imageList3 = e
					this.params.logo = e[0].url
					console.log('1111111');
				} else if (type == 5) {
					console.log('22');
					this.imageList4 = e
					this.params.backgroundImg = e[0].url
				}
			},
			handleSave() {
				if (this.params.category == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择经营品类'
					})
					return
				}
				if (this.params.shopName == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入门店名称'
					})
					return
				}
				if (this.params.city == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择所在地区'
					})
					return
				}
				if (this.params.address == '') {
					uni.showToast({
						icon: 'none',
						title: '请定位到详细位置'
					})
					return
				}
				if (this.params.doorImg == '') {
					uni.showToast({
						icon: 'none',
						title: '请上传门头照片'
					})
					return
				}
				if (this.params.licenseImg == '') {
					uni.showToast({
						icon: 'none',
						title: '请上传营业执照'
					})
					return
				}
				if (this.params.otherImg == '') {
					uni.showToast({
						icon: 'none',
						title: '请上传资质'
					})
					return
				}
				if (this.params.shopPhone == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入联系人电话'
					})
					return
				}
				if (this.params.shopPeople == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入联系人'
					})
					return
				}
				editShopinfo(this.params).then(res => {
					console.log(res);
					uni.navigateBack()
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.footerbtn {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 99;

		.cont {
			display: flex;
			padding: 10rpx 20rpx;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			justify-content: center;

			.btn {
				width: 670rpx;
				height: 100rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				color: #FFFFFF;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
			}

			.absbtn {
				background: #808080;
			}
		}
	}

	.shop_t {
		display: flex;
		background: #fff;
		padding-top: 10rpx;
		position: sticky;
		top: 0%;
		z-index: 9;

		.ts {
			width: 50%;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			padding-bottom: 20rpx;
			border-bottom: 2px solid #E6E6E6;
		}

		.ats {
			width: 50%;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			padding-bottom: 20rpx;
			border-bottom: 2px solid #000000;
		}
	}

	.block_1 {
		background: #ffffff;
		padding: 20rpx 30rpx 10rpx;
		margin-bottom: 20rpx;

		.textarea1 {
			width: 690rpx;
			height: 200rpx;
			background: #FBFBFB;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000;
			padding: 20rpx;
			box-sizing: border-box;
			margin: 20rpx auto;
		}


		.inputs1 {
			font-weight: 400;
		}

		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

		.imgs {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			padding-bottom: 30rpx;

			.ts {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000;
			}

			.img_block {
				width: 330rpx;
				height: 200rpx;
				background: #F6F6F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 77rpx;
					height: 80rpx;
				}
			}
		}

		.imglist {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			margin: 40rpx auto;

			.img_block {
				width: 160rpx;
				height: 160rpx;
				background: #F6F6F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 16rpx;
				margin-bottom: 16rpx;

				image {
					width: 77rpx;
					height: 80rpx;
				}
			}

			.img_block:nth-child(4n+4) {
				margin-right: 0rpx;
			}

			.imgss {
				display: flex;
				flex-wrap: wrap;
			}
		}

		.items {
			margin: 40rpx auto;
			border-bottom: 1px solid #eee;

			.itit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
			}

			.dwflex {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.terxt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #979797;
				}

			}

			.test {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000;
				margin: 20rpx auto;
			}

			.t2 {
				width: 690rpx;
				min-height: 80rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000;
				box-sizing: border-box;
				margin: 20rpx auto;
			}

			.icont {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				padding: 26rpx 0rpx;

				input {
					flex: 1;
				}
			}

			.inputs {
				font-weight: 400;
				color: #D1CDCD;
			}

			.maps {
				position: relative;

				.abs {
					position: absolute;
					backdrop-filter: blur(10px);
					width: 100%;
					height: 200rpx;
					top: 0%;
					text-align: center;
					line-height: 200rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #979797;
				}
			}
		}
	}
</style>